<template>
	<!-- 商品分类添加 -->
	<view class="commodity_box">
		<u-empty
			mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"
			text="暂无分类商品菜单"
			v-show="typeListEmptyShow"
		>
		</u-empty>
		<view class="type_item" v-for="item in commodityTypeList">
			<text>{{item.typeName}}</text>
			<view class="type_item_btn_box">
				<u-button @click="checkTypeHaveCommodity(item.id)" class="type_item_btn" type="error" :plain="true" text="删除"></u-button>
				<u-button @click="openEditType(item)" class="type_item_btn" type="primary" :plain="true" text="修改"></u-button>
			</view>
		</view>
		<uni-fab
		ref="fab" 
		:horizontal="horizontal" 
		:vertical="vertical"
		@fabClick="fabClick" />
		<!-- 添加商品分类 弹出框 -->
		<u-popup round="10" :show="saveTypeShow" mode="center"  @close="saveTypeClose" @open="saveTypeOpen">
			<view class="u-popup-slot">
				<u-form
					labelPosition="left"
					:model="commodityTypeFormData"
					ref="commodityTypeForm"
					:rules="commodityTypeFormRules"
				>
					<u-form-item label="分类名称" label-width="85" prop="typeName">
						<u-input 
							v-model="commodityTypeFormData.typeName" 
							placeholder="请输入分类名称"
							border="none"
						/>
					</u-form-item>
				</u-form>
				<button @click="saveCommodityType">提交</button>
			</view>
		</u-popup>
		<!-- 添加商品分类 弹出框 -->
		<u-popup round="10" :show="editTypeShow" mode="center"  @close="editTypeClose" @open="editTypeOpen">
			<view class="u-popup-slot">
				<u-form
					labelPosition="left"
					:model="commodityTypeFormEditData"
					ref="commodityTypeFormEdit"
					:rules="commodityTypeFormEditRules"
				>
					<u-form-item label="分类名称" label-width="85" prop="typeName">
						<u-input 
							v-model="commodityTypeFormEditData.typeName" 
							placeholder="请输入分类名称"
							border="none"
						/>
					</u-form-item>
				</u-form>
				<button @click="editType">修改</button>
			</view>
		</u-popup>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 添加 商品分类 弹出框状态
				saveTypeShow: false,
				// 修改 商品分类 弹出框状态
				editTypeShow: false,
				// 悬浮按钮 水平对齐方式
				horizontal: 'right',
				// 悬浮按钮 垂直对齐方式
				vertical: 'bottom',
				// 商品分类对象
				commodityTypeFormData: {
					// 分类名称
					typeName: '',
					// 店铺id
					shopId: '',
					// 创建人id
					userProtalId: '',
				},
				// 修改商品分类对象
				commodityTypeFormEditData: {
					// 分类名称
					typeName: '',
					// 店铺id
					shopId: '',
					// 创建人id
					userProtalId: '',
				},
				// 商品分类新增校验
				commodityTypeFormRules: {
					typeName: [
						{
							type: 'string',
							required: true,
							message: '请填分类名称',
							trigger: ['blur', 'change']
						}, {
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return uni.$u.test.chinese(value);
							},
							message: "分类名称必须为中文",
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ["change", "blur"],
						},
						{
							validator: (rule, value, callback) => {
								return
							},
							message: "该分类类型已存在,请更改",
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ["change", "blur"],
						}
					],
				},
				// 修改商品分类新增校验
				commodityTypeFormEditRules: {
					typeName: [
						{
							type: 'string',
							required: true,
							message: '请填分类名称',
							trigger: ['blur', 'change']
						}, {
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return uni.$u.test.chinese(value);
							},
							message: "分类名称必须为中文",
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ["change", "blur"],
						},
						{
							validator: (rule, value, callback) => {
								return
							},
							message: "该分类类型已存在,请更改",
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ["change", "blur"],
						}
					],
				},
				// 存放商品分类信息列表
				commodityTypeList: [],
				typeListEmptyShow: false,
			}
		},
		mounted () {
			this.commodityTypeFormData.shopId = uni.getStorageSync('shopId')
			// 初始化 根据店铺id获取当前 商品分类列表信息
			this.getCommodityTypeList()
		},
		methods: {
			// 校验 商品类别是否含有 商品信息
			checkTypeHaveCommodity (id) {
				this.$myRequest({
					url: '/eat-service/commodityType/checkTypeHaveCommodity',
					method: 'get',
					data: {
						id: id
					}
				}).then(res => {
					if (res.data.flag) {
						this.deleteType(id)
					} else {
						this.uNotify('删除失败，类别菜单中含有商品信息', 'warning')
					}
				})
			},
			// 删除 商品分了
			deleteType (id) {
				this.$myRequest({
					url: '/eat-service/commodityType/deleteCommodityType',
					method: 'delete',
					data: JSON.stringify(id)
				}).then(res => {
					if (res.data.flag) {
						this.getCommodityTypeList()
						this.uNotify('删除成功', 'success')
					} else {
						this.uNotify('添加失败', 'warning')
					}
				})
			},
			// 打开 商品类别修改弹框
			openEditType(item) {
				this.editTypeShow = true
				this.commodityTypeFormEditData.typeName = item.typeName
				this.commodityTypeFormEditData.id = item.id
			},
			// 修改 商品分类
			editType (id) {
				this.$myRequest({
					url: '/eat-service/commodityType/editCommodityType',
					method: 'put',
					data: JSON.stringify(this.commodityTypeFormEditData)
				}).then(res => {
					if (res.data.flag) {
						this.getCommodityTypeList()
						this.editTypeShow = false
						this.uNotify('修改成功', 'success')
					} else {
						this.uNotify('修改失败', 'warning')
					}
				})
			},
			// 根据店铺id获取当前 商品分类列表信息
			getCommodityTypeList () {
				this.$myRequest({
					url: '/eat-service/commodityType/getCommodityTypeList',
					data: {
						shopId: this.commodityTypeFormData.shopId
					}
				}).then(res => {
					this.commodityTypeList = res.data.obj
					if (this.commodityTypeList.length === 0) {
						this.typeListEmptyShow = true
					} else {
						this.typeListEmptyShow = false
					}
				})
			},
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					message: message,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
			// 打开 新增商品分类 触发方法
			saveTypeOpen() {
				// console.log('open');
			},
			// 关闭 新增商品分类 触发方法
			saveTypeClose() {
				this.saveTypeShow = false
				// console.log('close');
			},
			// 打开 新增商品分类 触发方法
			editTypeOpen() {
				// console.log('open');
			},
			// 关闭 新增商品分类 触发方法
			editTypeClose() {
				this.editTypeShow = false
				// console.log('close');
			},
			// 打开 新增商品分类弹框
			fabClick() {
				this.saveTypeShow = true
			},
			saveCommodityType() {
				this.commodityTypeFormData.userProtalId = uni.getStorageSync('id')
				this.$refs.commodityTypeForm.validate().then(res => {
					this.$myRequest({
						url: '/eat-service/commodityType/saveCommodityType',
						method: 'post',
						data: JSON.stringify(this.commodityTypeFormData)
					}).then(res => {
						if (res.data.flag) {
							this.getCommodityTypeList()
							this.saveTypeShow = false
							this.commodityTypeFormData.typeName = ''
						} else {
							this.uNotify('添加失败', 'warning')
						}
					})
				})
			}
		}
	}
</script>

<style scoped>
.commodity_box{
	width: 100%;
	overflow: hidden;
}
.u-popup-slot {
	width: 280px;
	height: 100px;
	@include flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
}
.type_item{
	width: 100%;
	height: 60px;
	border-bottom: 1px solid gainsboro;
	line-height: 60px;
	padding: 0px 15px;
	position: relative;
}
.type_item_btn_box{
	position: absolute;
	right: 10%;
	top: 40%;
}
.type_item_btn{
	width: 40px;
	height: 20px;
	float:left;
	margin-left: 10px;
}
</style>
